<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="icon" type="image/png" href="./favicon.ico">
  <title>Kronos</title>
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,700" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/spacetime"></script>
  <script src="./scripts.js"></script>
</head>
<body>
<div class="container">
  <div class="row top">
    <div class="column small_col">
    </div>
    <div class="column big_col">
      <input type="text" id="input_dt" placeholder="kronos" autofocus=true></input>
      <span class="local_tz"></span>
    </div>
  </div>
  <div id="tz_row_container">
    <!--timezone rows go below here-->
  <!-- Example row:
  <div class="row time">
    <div class="column small_col label">
      <span class="tz_label">
        <span class="geo_emoji">🦞</span>
        <span class="geo_name">Boston</span>
      </span>'
    </div>
    <div class="column big_col">
      <span class="tz_time boston"></span>
      <span class="tz_iso_time boston_iso"></span>
    </div>
   End example row -->
</div>
  <div class="row time">
    <div class="column small_col label footer">
    </div>
    <div class="column big_col footer">
    </div>
  </div>
</div>
</body>
